<template>
	<view class="button">
		<view class="title">
			全部
		</view>
		<radio-group class="redio" @change="chan" >
			<label v-for="item in radioGroup" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
			数据分类
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup1" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
			基础分类
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup2" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
			热点客户
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup3" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
			客户类型
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup4" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
		分类
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup5" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		<!-- 热点客户 -->
		<view class="title">
			客户标记
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup6" :key="item">
				<radio  :value="item"  ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'bag']" @click="b" :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
	</view>
</template>

<script>
	export default{
	    data(){
	        return{
	            activeRadio:'', //存的是选中的value值
				radioGroup:['全部数据'],
				radioGroup1:['需要我审核','我提交的审核','未提交的审核','未开始的审核','审核中','审核通过','审核拒绝','审核撤回'],
				radioGroup2:['未读','本人客户','潜在客户','签单客户','重复购买客户','15天未跟踪','30天未跟踪','60天未跟踪','90天未跟踪'],
				radioGroup3:['是','否'],
				radioGroup4:['内贸客户','外贸客户'],
				radioGroup5:['售前跟踪','需求确定','售中跟单','签约洽谈','成交售后','跟单失效','暂且搁置','其他阶段'],
				radioGroup6:['客户','供应商兼职做客户']
				
				
	        }
	    },
	    methods:{
	        chan(e){
	            this.activeRadio = e.detail.value;
	            console.log(this.activeRadio);
	            console.log(e);
				// console.log(item==activeRadio)
	        },
			b(){
				 // this.$refs.me.click();
				   // alert('我是aa');
				   
			}
	    }
	}
</script>

<style scoped lang="scss">
	.button{
		margin: 0  16*2rpx;
		.title{
			margin:16*2rpx 0 ;
			text-align: left;
			font-size: 14*2rpx;
			line-height: 20*2rpx;
			font-weight: 500;
			color: #3C3C3C;
		}
		.redio{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.label{
				width: 113*2rpx;
				background-color: red;
			}
		}
		.aa{
			width: 110*2rpx;
			height: 40*2rpx;
			margin-bottom: 16*2rpx;
			border: 2rpx solid #C3C3C3;
			border-radius: 20rpx;
			text-align:center;
			line-height: 40*2rpx;;
		}
		.bag{
			padding: 0 20rpx;
			height: 40*2rpx;
			margin-bottom: 16*2rpx;
			border: 2rpx solid #C3C3C3;
			border-radius: 10%;
			text-align:center;
			line-height: 40*2rpx;;
		}
	}
	.blue{
		background-color: #0062CC;
	}
</style>
